<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
    <title>steam商城</title>
    <link rel="stylesheet" type="text/css"
        href="../../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <link href="../../assets/libs/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../../dist/css/style.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper" data-sidebar-position="fixed">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md">
                <div class="navbar-header" data-navheader="fixed">
                    <!-- ============================================================== -->
                    <!-- Logo -->
                    <!-- ============================================================== -->
                    <a class="navbar-brand" href="../index.html">
                        <!-- Logo text -->
                        <span class="logo-text">
                            <!-- dark Logo text -->
                            <img src="../../assets/images/logos/logo-text.png" alt="homepage" class="dark-logo" />
                        </span>
                    </a>
                    <!-- ============================================================== -->
                    <!-- End Logo -->
                    <!-- ============================================================== -->
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse collapse" id="navbarSupportedContent">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav float-left mr-auto">
                        <!-- ============================================================== -->
                        <!-- End mega menu -->
                        <!-- ============================================================== -->
                    </ul>
                    <!-- ============================================================== -->
                    <!-- Right side toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav float-right">
                        <!-- ============================================================== -->
                        <!-- Search -->
                        <!-- ============================================================== -->
                        <li class="nav-item search-box" id="search-box-top">
                            <form class="app-search d-block">
                                <input type="text" class="form-control" placeholder="请输入游戏名称">
                                <a href="" class="active"><i class="fa fa-search"></i></a>
                            </form>
                        </li>
                        <!-- ============================================================== -->
                        <!-- User profile-->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark pro-pic" href=""
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-user"></i>
                                <span class="ml-2 user-text font-medium">Steve</span><span
                                    class="fas fa-angle-down ml-2 user-text"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right user-dd animated ">
                                <a class="dropdown-item" href="javascript:void(0)"><i class="ti-list mr-1 ml-1"></i>
                                    我的订单</a>
                                <a class="dropdown-item" href="javascript:void(0)"><i class="ti-settings mr-1 ml-1"></i>
                                    账户设置</a>
                                <a class="dropdown-item" href="javascript:void(0)"><i class="ti-server mr-1 ml-1"></i>
                                    我的服务</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void(0)"><i
                                        class="fa fa-power-off mr-1 ml-1"></i> 退出登录</a>
                            </div>
                        </li>
                        <!-- ============================================================== -->
                        <!-- User profile -->
                        <!-- ============================================================== -->
                        <!-- <li class="nav-item">
                            <a class="nav-link" href="register.html">
                                注册
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">
                                登录
                            </a>
                        </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="../account/my-order.html">
                                我的订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../document.html">
                                <i class="far fa-question-circle"></i>
                                帮助中心
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../index.html"
                                aria-expanded="false"><i class="fas fa-home" style="font-size: 14px;"></i>首页</a></li>
                        <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link active"
                                href="../goods-list-cards.html" aria-expanded="false">热门游戏</a></li>
                        <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
                                href="../goods-list-cards.html" aria-expanded="false">最新上市</a></li>
                        <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
                                href="../goods-list-cards.html" aria-expanded="false">特惠游戏</a></li>
                        <li class="sidebar-item"> <a class="sidebar-link waves-effect waves-dark sidebar-link"
                                href="../goods-topic.html" aria-expanded="false">专题推荐</a></li>
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <!-- ============================================================== -->
        <!-- End Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">

            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="page-content container-fluid">
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <div class="card">
                    <div class="row no-gutters">
                        <div class="col-lg-3 col-md-4 border-right">
                            <div class="card-body">
                                <a href="./index.html" class="card-title mb-0">个人中心</a>
                                <hr>
                                <ul class="list-style-none">
                                    <li class="py-2">
                                        <a href="./my-order.html">
                                            <div class="d-flex">
                                                <span>我的订单</span>
                                                <div class="ml-auto">
                                                    <i class="ti-angle-right"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="py-2">
                                        <a href="./account-setting.html" class="text-danger">
                                            <div class="d-flex">
                                                <span>账户设置</span>
                                                <div class="ml-auto">
                                                    <i class="ti-angle-right"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="py-2">
                                        <a href="./my-server.html">
                                            <div class="d-flex">
                                                <span>我的服务</span>
                                                <div class="ml-auto">
                                                    <i class="ti-angle-right"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-8">
                            <div class="card-body" style="min-height:500px;">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs customtab" role="tablist">
                                    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab-01"
                                            role="tab">个人基本资料</a> </li>
                                    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab-02"
                                            role="tab">安全设置</a> </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content pt-3">
                                    <div class="tab-pane active" id="tab-01" role="tabpanel">
                                        <div class="alert alert-danger">提示：身份证请填写真实信息，网站需要实名认证</div>
                                        <div class="form-horizontal">
                                            <div class="form-group row">
                                                <label for="fname"
                                                    class="col-sm-3 text-right control-label col-form-label">用户名</label>
                                                <div class="col-sm-5">
                                                    <input type="text" class="form-control" placeholder="请输入用户名/手机号">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="fname"
                                                    class="col-sm-3 text-right control-label col-form-label">真实姓名</label>
                                                <div class="col-sm-5">
                                                    <input type="text" class="form-control" placeholder="请输入真实姓名">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="fname"
                                                    class="col-sm-3 text-right control-label col-form-label">身份证号</label>
                                                <div class="col-sm-5">
                                                    <input type="text" class="form-control" placeholder="请输入身份证号">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="fname"
                                                    class="col-sm-3 text-right control-label col-form-label">性别</label>
                                                <div class="col-sm-5 pt-2">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                            name="inlineRadioOptions" id="inlineRadio1" value="option1"
                                                            checked>
                                                        <label class="form-check-label" for="inlineRadio1">男</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                            name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                                        <label class="form-check-label" for="inlineRadio2">女</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="fname"
                                                    class="col-sm-3 text-right control-label col-form-label">生日</label>
                                                <div class="col-sm-5">
                                                    <input type="text" class="form-control mydatepicker"
                                                        placeholder="请选择出生日期">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-sm-5 offset-3">
                                                    <button class="btn btn-danger sa-success">确认提交</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab-02" role="tabpanel">
                                        <div class="form-horizontal mt-4">
                                            <div class="form-group row">
                                                <label class="control-label text-right col-md-3"><i
                                                        class="fas fa-check-circle text-success"></i> 绑定手机</label>
                                                <div class="col-md-4">
                                                    <p class="form-control-static"> 133****1412 </p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="form-control-static"> <a href="javascript:;"
                                                            data-toggle="modal" data-target=".editPhoneModal">重新绑定</a>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="control-label text-right col-md-3"><i
                                                        class="fas fa-exclamation-circle text-danger"></i> 登录密码</label>
                                                <div class="col-md-4">
                                                    <p class="form-control-static"> 未设置 </p>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="form-control-static"> <a href="javascript:;"
                                                            data-toggle="modal"
                                                            data-target=".editPasswordModal">设置密码</a>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ============================================================== -->
                <!-- edit phonenumber -->
                <!-- ============================================================== -->
                <div class="modal editPhoneModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                    aria-hidden="true" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myLargeModalLabel">绑定手机号</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">

                                <div class="form-horizontal">
                                    <div class="form-group row">
                                        <label for="fname"
                                            class="col-sm-3 text-right control-label col-form-label">手机号</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="fname" placeholder="请输入手机号">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="fname"
                                            class="col-sm-3 text-right control-label col-form-label">动态验证码</label>
                                        <div class="col-sm-8">
                                            <div class="input-group mb-3">
                                                <input type="password" class="form-control" placeholder="请输入动态验证码">
                                                <div class="input-group-append">
                                                    <button class="btn btn-secondary" type="button">
                                                        获取验证码
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group text-center mb-0">
                                        <div class="col-6 offset-3">
                                            <button class="btn btn-block btn-danger btn-bind-mobile" type="submit"
                                                data-dismiss="modal">确定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- ============================================================== -->
                <!-- edit phonenumber -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- edit password -->
                <!-- ============================================================== -->
                <div class="modal editPasswordModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                    aria-hidden="true" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myLargeModalLabel">修改密码</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">

                                <div class="form-horizontal">
                                    <div class="form-group row">
                                        <label for="fname"
                                            class="col-sm-3 text-right control-label col-form-label">原密码</label>
                                        <div class="col-sm-8">
                                            <input type="password" class="form-control form-control-password"
                                                placeholder="请输入密码">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="fname"
                                            class="col-sm-3 text-right control-label col-form-label">新密码</label>
                                        <div class="col-sm-8">
                                            <input type="password" class="form-control form-control-password"
                                                placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="fname"
                                            class="col-sm-3 text-right control-label col-form-label">重复新密码</label>
                                        <div class="col-sm-8">
                                            <input type="password" class="form-control form-control-password"
                                                placeholder="请再次输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group text-center mb-0">
                                        <div class="col-6 offset-3">
                                            <button class="btn btn-block btn-danger btn-edit-password" type="submit"
                                                data-dismiss="modal">确定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- ============================================================== -->
                <!-- edit password -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->

            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <footer class="footer">
                <div class="footer-links">
                    <div class="container pt-4 pb-4 d-flex justify-content-between">
                        <div>
                            <h3>关于</h3>
                            <ul>
                                <li><a href="../document.html#aboutus">关于平台</a></li>
                                <li><a href="../document.html#termsOfService">服务条款</a></li>
                                <li><a href="../document.html#member">会员</a></li>
                                <li><a href="../document.html#orderPay">订单支付</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3>支付方式</h3>
                            <ul>
                                <li><a href="../document.html#alipay">支付宝</a></li>
                                <li><a href="../document.html#wechat">微信</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3>售后服务</h3>
                            <ul>
                                <li><a href="../document.html#RefundPolicy">退款政策</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3>虚拟发货</h3>
                            <ul>
                                <li><a href="../document.html#CDKreceive">CDkey领取</a></li>
                                <li><a href="../document.html#steamPurchasing">Steam代购</a></li>
                                <li><a href="../document.html#Anonymous">匿名领取</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3>客服中心</h3>
                            <ul>
                                <li>客服在线时间：09:00 - 21:00</li>
                                <li>客服QQ：1812945859</li>
                                <li>客服邮箱：123@123.COM</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-copyright text-center">Copyright since 2004 All Rights Reserved 版权所有 侵权必究
                    <a href="javascript:;">皖ICP备B2-20100023-11</a>.</div>

            </footer>
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->

    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- apps -->
    <script src="../../dist/js/app.min.js"></script>
    <script src="../../dist/js/app.init.horizontal-fullwidth.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="../../dist/js/waves.js"></script>
    <!--Custom JavaScript -->
    <script src="../../dist/js/custom.min.js"></script>
    <script src="../../assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="../../assets/libs/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="../../assets/libs/sweetalert2/dist/promise.min.js"></script>
    <script src="../../assets/libs/sweetalert2/dist/sweetalert2.all.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.mydatepicker').datepicker({
                autoclose: true,
                todayHighlight: true,
                language: 'zh-CN',
            });
            $('.sa-success').click(function () {
                Swal.fire("修改成功",
                    "您的个人基本资料修改成功",
                    "success")
            });
            $('.btn-bind-mobile').click(function () {
                Swal.fire("修改成功",
                    "您的手机号码修改成功",
                    "success")
            });
            $('.btn-edit-password').click(function () {
                Swal.fire("修改成功",
                    "您的密码修改成功",
                    "success")
            });
        });

        $(window).scroll(function () { //开始监听滚动条

            //获取当前滚动条高度
            var topp = $(document).scrollTop();
            if (topp > 520) {
                $('.top-navbar,.topbar').css('height', 80);
                $('.left-sidebar').css('padding-top', 80);
            } else if (topp <= 520) {
                $('.top-navbar,.topbar').css('height', 120);
                $('.left-sidebar').css('padding-top', 120);
            }
        })
    </script>
</body>

</html>